<template>
	<div>
		<title-header :title="title"></title-header>
		<section>
			<div class="top">
				<p>{{refundDetails.status}}</p>
				<p>{{refundDetails.finishDate}}</p>
			</div>
			<group class='group'>
				<cell title="退款总金额">
					<div>
						<span style="color: red">￥{{refundDetails.price}}</span>
					</div>
				</cell>
				<cell title="退款信息"></cell>
				<div class="good clearfix ">
					<div class="left">
						<img :src="refundDetails.image" align="absmiddle" />
					</div>
					<div class="right relative">
						<p class="firstP">{{refundDetails.name}}</p>
						<p>
							<span class=' showColor opacity'> {{refundDetails.specification}}</span>
						</p>
					</div>
				</div>
				<cell-form-preview :list="refundDetails.list"></cell-form-preview>
			</group>
		</section>
	</div>
</template>

<script>
import { Cell, CellBox, CellFormPreview, Group, Badge } from 'vux'

import TitleHeader from '@/components/titleHeader.vue'
import Data from '@/server/server.js'
export default {
  components: {
    TitleHeader,
    Cell,
    CellBox,
    CellFormPreview,
    Group,
    Badge
  },
  data () {
    return {
      title: '退款详情',
      refundDetails: {}
    }
  },
  mounted () {
    Data.refundDetail.then(data => {
	  this.refundDetails = data
    })
  }
}
</script>
<style scoped="scoped">
.top {
  width: 100%;
  height: 5.5rem;
  background: orangered;
  color: white;
  padding: 1rem 0 0 0;
  line-height: 2rem;
}

.top p {
  padding-left: 5%;
}
.group {
  margin-top: -20px;
}
.good {
  width: 100%;
  height: 4rem;
  padding: 1rem 0;
  background: rgb(251, 249, 249);
}

.left {
  width: 25%;
  float: left;
}

.left img {
  width: 75%;
  margin-left: 10%;
}

.right {
  width: 70%;
  float: left;
  padding-left: 5%;
}

.right .firstP {
  font-size: 0.9rem;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  padding-right: 5%;
}

.showColor {
  font-size: 0.8rem;
}

.money {
  color: red;
  font-size: 1.1rem;
}

.opacity {
  opacity: 0.4;
}

.positionRight {
  position: absolute;
  right: 5%;
  font-size: 0.8rem;
}
</style>